<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仿重庆红岩历史革命博物馆官网的导航栏</title>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/homeWokr1.css">
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			<div class="box">
				<img src="img/logo.png" >
				<div class="content">
					<img src="img/icon-18.png" >
					<ul class="contentUl">
						<li><a href="#">设为首页</a></li>
						<div class="line">|</div>
						<li><a href="#">加入收藏</a></li>
						<div class="line">|</div>
						<li><a href="#">热线：023-65312300（沙坪坝片区）023-63303457（渝中片区）</a></li>
						<div class="line">|</div>
						<li><a href="#">English</a></li>
					</ul>
					<form name="search" class="myform" method="post">
						<input type="text" name="key" value class="search" placeholder="请输入关键词"/>
						<span class="search_txt"><a href="#">搜索</a></span>
					</form>
				</div>
			</div>
		</div>
		<!-- 头部 end-->
		<!-- 导航部分 -->
		<div class="box2" >
			<ul  class="navUl" id="root" v-cloak>
				<li v-for="menu in menus" @mouseover="menu.show=!menu.show" @mouseout="menu.show=!menu.show" class="navLi">
					<a :href="menu.url">
						{{menu.name}}
					</a>
					<ul v-show="menu.show" class="navSub">
						<li v-for="subMenu in menu.subMenus" class="subLi">
							<a :href="subMenu.url">
								{{subMenu.name}}
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 导航部分 end-->
		<!-- banner部分 -->
		<div class="box3"></div>
		<!-- banner部分 end-->
		<!-- js部分 -->
		<script>
		const app=Vue.createApp({
			data(){
				return{
					menus:[
					{
						name:'首页',url:'#',show:false
					},
					{
						name:'关于红岩',url:'#',show:false,subMenus:[
							{name:'红岩文化',url:'#'},
							{name:'博物馆机构',url:'#'},
							{name:'历史沿革',url:'#'}
						]
					},
					{
						name:'公告动态',url:'#',show:false,subMenus:[
							{name:'文博信息',url:'#'},
							{name:'政务平台',url:'#'},
							{name:'公告',url:'#'},
							{name:'专题报告',url:'#'}
						]
					},
					{
						name:'馆藏精品',url:'#',show:false,subMenus:[
							{name:'一级文物',url:'#'},
							{name:'二级文物',url:'#'},
							{name:'三级文物',url:'#'}
						]
					},
					{
						name:'陈列展馆',url:'#',show:false,subMenus:[
							{name:'虚拟展览',url:'#'},
							{name:'基本陈列',url:'#'},
							{name:'复原陈列',url:'#'},
							{name:'临时展览',url:'#'},
							{name:'展览交流',url:'#'}
						]
					},
					{
						name:'研究开发',url:'#',show:false,subMenus:[
							{name:'历史研究',url:'#'},
							{name:'艺术创作',url:'#'},
							{name:'影音在线',url:'#'},
							{name:'文创产品',url:'#'}
						]
					},
					{
						name:'公共教育',url:'#',show:false,subMenus:[
							{name:'党性教育',url:'#'},
							{name:'爱国主义教育',url:'#'},
							{name:'研学实践教育',url:'#'},
							{name:'科普教育',url:'#'}
						]
					},
					{
						name:'参观服务',url:'#',show:false,subMenus:[
							{name:'景点介绍',url:'#'},
							{name:'服务内容',url:'#'},
							{name:'网上预约',url:'#'},
							{name:'志愿服务',url:'#'}
						]
					},
					{
						name:'网上预约',url:'#',show:false,
					}
					]
				}
			},
			methods:{
				
			},
		});
		const vm=app.mount("#root");
		</script>
		<!-- js部分 end-->
	</body>
</html>
